<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvasOne" style="border:1px solid red;" width="500" height="300"></canvas>

<script>
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    //画网线
    for(let i = 1 ;i<=50; i++){
        ctx.beginPath();
        ctx.moveTo(i*10, 0);
        ctx.lineTo(i*10, 300)
        ctx.strokeStyle="#eee"
        ctx.stroke()
    }
    for(let i = 1 ;i<=30; i++){
        ctx.beginPath();
        ctx.moveTo(0, i*10);
        ctx.lineTo(500, i*10)
        ctx.strokeStyle="#eee"
        ctx.stroke()
    }


    // ctx.beginPath();
    // ctx.moveTo(50, 50);
    // ctx.bezierCurveTo(100, 100, 200, 40, 250, 100);
    // ctx.strokeStyle="#000"
    // ctx.stroke();

    //画坐标轴
    ctx.beginPath();
    ctx.moveTo(50, 250);
    ctx.lineTo(500, 250)
    ctx.strokeStyle="#000"
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(50, 250);
    ctx.lineTo(50, 0)
    ctx.strokeStyle="#000"
    ctx.stroke();

    ctx.lineWidth=0.2
    for(let i=0; i<8; i++){
        ctx.beginPath()
        ctx.moveTo(10, 10)
        ctx.lineTo(10, 15)
        ctx.stroke()
    }

    var isMove = false;
    var spanX = 0, spanY = 0;
    var lastX=100,lastY=100;
    //鼠标事件
    canvas.onmousedown = function (e) {
        var x = e.clientX;
        var y = e.clientY;
        ctx.moveTo(x, y);

        spanX = x - lastX;
        spanY = y - lastY;
        isMove = true;
        console.log("isMove--onmousedown",isMove)
    }
    canvas.onmousemove = function (e) {
        var x = e.clientX;
        var y = e.clientY;
        // if ( ctx.isPointInPath(x, y)) {
        //     ctx.fillStyle = 'red';
        //     ctx.fill();
        // }else{
        //     ctx.fillStyle = 'black';
        //     ctx.fill();
        // }
        if (isMove) {
            console.log("ctx.isPointInPath",ctx.isPointInPath(x, y))
            if (ctx.isPointInPath(x, y)) {
                lastX=x-spanX;
                lastY=y-spanY;
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.beginPath();
                ctx.rect(lastX,lastY, 100, 100);
                ctx.fill();
                ctx.closePath();
            }
        }
    }

    canvas.onmouseup = function (e) {
        isMove = false;
    }
</script>
</body>
</html>